<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程详情 - 知识付费会员App</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="../css/styles.css">
    <script>
        // 检测页面是否在iframe中打开
        window.onload = function() {
            if (window.self !== window.top) {
                // 页面在iframe中，移除iPhone容器样式
                var container = document.querySelector('.iphone-container');
                if (container) {
                    container.style.borderRadius = '0';
                    container.style.boxShadow = 'none';
                    container.style.border = 'none';
                }
            }
        };
    </script>
</head>
<body>
    <div class="iphone-container">
        <!-- 顶部状态栏 -->
        <div class="status-bar">
            <div class="status-bar-left">
                <span>10:30</span>
            </div>
            <div class="status-bar-right">
                <i class="fas fa-signal mr-2"></i>
                <i class="fas fa-wifi mr-2"></i>
                <i class="fas fa-battery-full"></i>
            </div>
        </div>

        <!-- 页面内容 -->
        <div class="page-content">
            <!-- 课程封面 -->
            <div class="relative">
                <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Python数据分析课程" class="w-full h-56 object-cover">
                <div class="absolute top-0 left-0 right-0 bg-gradient-to-b from-black/50 to-transparent p-4">
                    <div class="flex items-center text-white">
                        <button class="mr-2"><i class="fas fa-arrow-left"></i></button>
                        <h1 class="text-lg font-bold">课程详情</h1>
                    </div>
                </div>
                <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4">
                    <div class="flex justify-between items-center">
                        <div>
                            <span class="vip-badge">VIP</span>
                        </div>
                        <div class="flex space-x-4 text-white">
                            <button><i class="fas fa-share-alt"></i></button>
                            <button><i class="far fa-heart"></i></button>
                        </div>
                    </div>
                </div>
                <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                    <button class="w-12 h-12 rounded-full bg-white/30 flex items-center justify-center text-white text-xl">
                        <i class="fas fa-play"></i>
                    </button>
                </div>
            </div>

            <!-- 课程信息 -->
            <div class="p-4 bg-white">
                <h1 class="text-xl font-bold">Python数据分析实战</h1>
                <div class="flex items-center mt-2">
                    <span class="badge mr-2">编程</span>
                    <span class="badge mr-2">数据分析</span>
                    <span class="badge">Python</span>
                </div>
                <div class="flex justify-between items-center mt-3">
                    <div class="text-sm text-gray-500">
                        <p><i class="fas fa-user mr-1"></i> 2.8万人在学</p>
                    </div>
                    <div class="flex items-center">
                        <span class="text-yellow-500 mr-1">4.9</span>
                        <div class="flex text-yellow-500">
                            <i class="fas fa-star text-xs"></i>
                            <i class="fas fa-star text-xs"></i>
                            <i class="fas fa-star text-xs"></i>
                            <i class="fas fa-star text-xs"></i>
                            <i class="fas fa-star-half-alt text-xs"></i>
                        </div>
                        <span class="text-gray-500 text-xs ml-1">(1324条评价)</span>
                    </div>
                </div>
                <div class="flex items-center justify-between mt-3">
                    <div>
                        <p class="text-sm text-gray-500">课程价格</p>
                        <div class="flex items-center mt-1">
                            <span class="text-2xl font-bold text-red-500">¥399</span>
                            <span class="text-gray-400 line-through text-sm ml-2">¥599</span>
                            <span class="ml-2 text-xs text-white bg-red-500 px-1.5 py-0.5 rounded">限时优惠</span>
                        </div>
                    </div>
                    <div>
                        <button class="bg-white text-blue-500 border border-blue-500 px-4 py-2 rounded-full text-sm font-semibold">
                            <i class="fas fa-cart-plus mr-1"></i> 添加购物车
                        </button>
                    </div>
                </div>
            </div>

            <!-- 讲师信息 -->
            <div class="p-4 border-t border-gray-100 bg-white">
                <h2 class="text-lg font-bold">讲师介绍</h2>
                <div class="flex items-center mt-3">
                    <div class="w-12 h-12 rounded-full overflow-hidden">
                        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="讲师头像" class="w-full h-full object-cover">
                    </div>
                    <div class="ml-3">
                        <h3 class="font-semibold">刘教授</h3>
                        <p class="text-sm text-gray-500">资深Python工程师 · 数据科学专家</p>
                    </div>
                    <button class="ml-auto bg-blue-50 text-blue-500 text-xs px-3 py-1 rounded-full">
                        +关注
                    </button>
                </div>
                <p class="text-sm text-gray-600 mt-3">
                    10年Python开发经验，曾就职于Google、阿里等知名企业，现任某知名互联网公司技术总监。擅长数据分析、机器学习算法，已出版《Python数据分析》等多部畅销书籍。
                </p>
            </div>

            <!-- 课程详情 -->
            <div class="mt-2 p-4 bg-white">
                <h2 class="text-lg font-bold">课程详情</h2>
                <div class="mt-3 space-y-2 text-sm text-gray-600">
                    <p>本课程从Python基础入门，逐步深入数据分析核心技术，通过实际项目案例，手把手教你掌握数据分析全流程。</p>
                    <p class="font-semibold mt-2">课程亮点：</p>
                    <ul class="list-disc pl-5 space-y-1">
                        <li>零基础入门，循序渐进学习Python数据分析</li>
                        <li>NumPy、Pandas、Matplotlib等核心库详解</li>
                        <li>10个真实项目案例，涵盖金融、电商、医疗等多个领域</li>
                        <li>面试攻略与就业指导，助你轻松找到工作</li>
                    </ul>
                    <p class="font-semibold mt-2">适合人群：</p>
                    <ul class="list-disc pl-5 space-y-1">
                        <li>零基础想学习Python的初学者</li>
                        <li>想转行数据分析师的职场人士</li>
                        <li>需要提升数据处理能力的业务人员</li>
                        <li>对数据科学感兴趣的学生和研究人员</li>
                    </ul>
                </div>
            </div>

            <!-- 课程目录 -->
            <div class="mt-2 p-4 bg-white">
                <div class="flex justify-between items-center">
                    <h2 class="text-lg font-bold">课程目录</h2>
                    <p class="text-sm text-gray-500">共45课时 · 约25小时</p>
                </div>
                
                <!-- 章节1 -->
                <div class="mt-4">
                    <div class="flex justify-between items-center">
                        <h3 class="font-semibold">第一章：Python基础入门</h3>
                        <button class="text-blue-500"><i class="fas fa-chevron-down"></i></button>
                    </div>
                    <div class="mt-2 space-y-3">
                        <div class="flex items-center">
                            <i class="fas fa-play-circle text-blue-500 mr-3"></i>
                            <div class="flex-1">
                                <p class="text-sm">1.1 Python环境搭建与配置</p>
                                <div class="flex justify-between items-center mt-1">
                                    <div class="flex items-center">
                                        <span class="text-xs text-gray-500 mr-2"><i class="far fa-clock mr-1"></i> 25分钟</span>
                                        <span class="text-xs bg-green-100 text-green-600 px-1 rounded">免费试学</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-play-circle text-blue-500 mr-3"></i>
                            <div class="flex-1">
                                <p class="text-sm">1.2 Python基础语法详解</p>
                                <div class="flex justify-between items-center mt-1">
                                    <div class="flex items-center">
                                        <span class="text-xs text-gray-500 mr-2"><i class="far fa-clock mr-1"></i> 40分钟</span>
                                    </div>
                                    <i class="fas fa-lock text-gray-400 text-sm"></i>
                                </div>
                            </div>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-play-circle text-blue-500 mr-3"></i>
                            <div class="flex-1">
                                <p class="text-sm">1.3 变量、数据类型与运算符</p>
                                <div class="flex justify-between items-center mt-1">
                                    <div class="flex items-center">
                                        <span class="text-xs text-gray-500 mr-2"><i class="far fa-clock mr-1"></i> 35分钟</span>
                                    </div>
                                    <i class="fas fa-lock text-gray-400 text-sm"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 章节2 -->
                <div class="mt-4">
                    <div class="flex justify-between items-center">
                        <h3 class="font-semibold">第二章：NumPy基础</h3>
                        <button class="text-blue-500"><i class="fas fa-chevron-right"></i></button>
                    </div>
                </div>
                
                <!-- 章节3 -->
                <div class="mt-4">
                    <div class="flex justify-between items-center">
                        <h3 class="font-semibold">第三章：Pandas数据处理</h3>
                        <button class="text-blue-500"><i class="fas fa-chevron-right"></i></button>
                    </div>
                </div>
                
                <!-- 章节4 -->
                <div class="mt-4">
                    <div class="flex justify-between items-center">
                        <h3 class="font-semibold">第四章：数据可视化</h3>
                        <button class="text-blue-500"><i class="fas fa-chevron-right"></i></button>
                    </div>
                </div>
                
                <!-- 更多章节 -->
                <div class="mt-4 text-center">
                    <button class="text-blue-500 text-sm">查看更多章节 <i class="fas fa-angle-down ml-1"></i></button>
                </div>
            </div>

            <!-- 学员评价 -->
            <div class="mt-2 p-4 bg-white">
                <div class="flex justify-between items-center">
                    <h2 class="text-lg font-bold">学员评价</h2>
                    <p class="text-sm text-blue-500">全部评价 <i class="fas fa-angle-right"></i></p>
                </div>
                
                <div class="mt-4 space-y-4">
                    <!-- 评价1 -->
                    <div>
                        <div class="flex items-center">
                            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="学员头像" class="w-8 h-8 rounded-full">
                            <div class="ml-2">
                                <h4 class="font-medium text-sm">张小姐</h4>
                                <div class="flex text-yellow-500 text-xs mt-0.5">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                </div>
                            </div>
                            <span class="ml-auto text-xs text-gray-500">2023-05-15</span>
                        </div>
                        <p class="text-sm text-gray-600 mt-2">
                            课程内容非常实用，讲解清晰，案例丰富。作为一个零基础的学员，我能够跟着老师的思路一步步学习，现在已经能够独立完成一些数据分析任务了。强烈推荐！
                        </p>
                    </div>
                    
                    <!-- 评价2 -->
                    <div>
                        <div class="flex items-center">
                            <img src="https://randomuser.me/api/portraits/men/86.jpg" alt="学员头像" class="w-8 h-8 rounded-full">
                            <div class="ml-2">
                                <h4 class="font-medium text-sm">王先生</h4>
                                <div class="flex text-yellow-500 text-xs mt-0.5">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="far fa-star"></i>
                                </div>
                            </div>
                            <span class="ml-auto text-xs text-gray-500">2023-04-28</span>
                        </div>
                        <p class="text-sm text-gray-600 mt-2">
                            老师讲得很好，逻辑清晰，但是有些高级内容讲解偏快，希望能够放慢节奏多一些实例。整体来说，性价比很高的一门课程。
                        </p>
                    </div>
                </div>
            </div>

            <!-- 推荐课程 -->
            <div class="mt-2 p-4 bg-white">
                <h2 class="text-lg font-bold">相关推荐</h2>
                <div class="mt-3 grid grid-cols-2 gap-3">
                    <div class="course-card">
                        <img src="https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="数据可视化" class="w-full h-24 object-cover rounded-t-lg">
                        <div class="p-2">
                            <h3 class="font-medium text-sm">数据可视化高级教程</h3>
                            <div class="flex justify-between items-center mt-1">
                                <div class="flex text-yellow-500 text-xs">
                                    <i class="fas fa-star"></i>
                                    <span class="text-gray-500 ml-1">4.8</span>
                                </div>
                                <span class="text-blue-500 text-xs font-medium">¥299</span>
                            </div>
                        </div>
                    </div>
                    <div class="course-card">
                        <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="机器学习" class="w-full h-24 object-cover rounded-t-lg">
                        <div class="p-2">
                            <h3 class="font-medium text-sm">Python机器学习实战</h3>
                            <div class="flex justify-between items-center mt-1">
                                <div class="flex text-yellow-500 text-xs">
                                    <i class="fas fa-star"></i>
                                    <span class="text-gray-500 ml-1">4.9</span>
                                </div>
                                <span class="text-blue-500 text-xs font-medium">¥459</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部购买栏 -->
        <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 px-4 py-2 flex items-center justify-between z-20">
            <div class="flex items-center">
                <button class="flex flex-col items-center mr-6">
                    <i class="far fa-heart text-gray-500"></i>
                    <span class="text-xs text-gray-500 mt-1">收藏</span>
                </button>
                <button class="flex flex-col items-center">
                    <i class="far fa-comment text-gray-500"></i>
                    <span class="text-xs text-gray-500 mt-1">评论</span>
                </button>
            </div>
            <div class="flex items-center">
                <button class="bg-blue-50 text-blue-500 px-4 py-2 rounded-full text-sm font-semibold mr-2">
                    加入购物车
                </button>
                <button class="bg-blue-500 text-white px-4 py-2 rounded-full text-sm font-semibold">
                    立即购买
                </button>
            </div>
        </div>
    </div>
</body>
</html> 